.video-section-container {
  margin: 20px auto;
  max-width: 640px;
  width: 100%;

  .video-section-content {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    height: 0;

    .video {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .subtitles {
      pointer-events: none;
    }
  }
}

.video-actions {
  display: flex;
  justify-content: center;

  select {
    margin: 10px 20px;
    font-size: 16px;
  }
}

// colors in subtitles
.white {
  color: rgba(255, 255, 255, 1);
}
.lime {
  color: rgba(0, 255, 0, 1);
}
.cyan {
  color: rgba(0, 255, 255, 1);
}
.red {
  color: rgba(255, 0, 0, 1);
}
.yellow {
  color: rgba(255, 255, 0, 1);
}
.magenta {
  color: rgba(255, 0, 255, 1);
}
.blue {
  color: rgba(0, 0, 255, 1);
}
.black {
  color: rgba(0, 0, 0, 1);
}
.bg_white {
  background: rgba(255, 255, 255, 1);
}
.bg_lime {
  background: rgba(0, 255, 0, 1);
}
.bg_cyan {
  background: rgba(0, 255, 255, 1);
}
.bg_red {
  background: rgba(255, 0, 0, 1);
}
.bg_yellow {
  background: rgba(255, 255, 0, 1);
}
.bg_magenta {
  background: rgba(255, 0, 255, 1);
}
.bg_blue {
  background: rgba(0, 0, 255, 1);
}
.bg_black {
  background: rgba(0, 0, 0, 1);
}
